<!-- 搜索框 -->
<div class="card glass-card mt-4">
    <div class="card-header bg-dark text-white">
        <h5 class="card-title mb-0">
            <i class="fas fa-search me-2"></i>&ensp;搜索框
        </h5>
    </div>
    <div class="card-body">
        <div class="form-label d-flex align-items-center mb-3">
            <label class="flex-grow-1" for="hideSearchBox">
                隐藏搜索框
            </label>
            <input type="checkbox" id="hideSearchBox" name="hideSearchBox" data-size="small" data-on-color="success" data-off-color="info" data-on-text="开启" data-off-text="关闭">
        </div>
        <div class="form-label d-flex align-items-center  mb-3">
            <label class="flex-grow-1" for="hideSearchCategories">
                隐藏搜索类别
            </label>
            <input type="checkbox" id="hideSearchCategories" name="hideSearchCategories" data-size="small" data-on-color="success" data-off-color="info" data-on-text="开启" data-off-text="关闭">
        </div>
        <div class="form-label d-flex align-items-center  mb-3">
            <label class="flex-grow-1" for="hideSearchButton">
                隐藏搜索图标
            </label>
            <input type="checkbox" id="hideSearchButton" name="hideSearchButton" data-size="small" data-on-color="success" data-off-color="info" data-on-text="开启" data-off-text="关闭">
        </div>
        <div class="mt-4">
            <div class="mb-3">
                <label for="searchBoxSize" class="form-label d-flex" style="font-size: 14px;">
                    <span title="📌 极简模式下可调">搜索框大小</span>
                </label>
                <input type="range" class="form-range" id="searchBoxSize" name="searchBoxSize" min="60" max="100" value="100" style="width: 80%">
                <span id="searchBoxSizeValue" class="badge" style="font-size: 15px; font-weight: normal">100%</span>
            </div>
            <div class="mb-3">
                <label for="searchBoxWidth" class="form-label d-flex" style="font-size: 14px;">
                    <span title="📌 极简模式下可调">搜索框宽度</span>
                </label>
                <input type="range" class="form-range" id="searchBoxWidth" name="searchBoxWidth" min="60" max="100" value="100" style="width: 80%">
                <span id="searchBoxWidthValue" class="badge" style="font-size: 15px; font-weight: normal">100%</span>
            </div>
            <div class="mb-3">
                <label for="searchBoxHeight" class="form-label d-flex" style="font-size: 14px;">
                    <span title="📌 极简模式下可调">搜索框高度</span>
                </label>
                <input type="range" class="form-range" id="searchBoxHeight" name="searchBoxHeight" min="0" max="100" value="100" style="width: 80%">
                <span id="searchBoxHeightValue" class="badge" style="font-size: 15px; font-weight: normal">100%</span>
            </div>
            <div class="mb-3">
                <label for="searchBoxRadius" class="form-label d-flex" style="font-size: 14px;">
                    <span>搜索框圆角</span>
                </label>
                <input type="range" class="form-range" id="searchBoxRadius" name="searchBoxRadius" min="0" max="100" value="100" style="width: 80%">
                <span id="searchBoxRadiusValue" class="badge" style="font-size: 15px; font-weight: normal">100%</span>
            </div>
            <div class="mb-3">
                <label for="searchBoxOpacity" class="form-label d-flex" style="font-size: 14px;">
                    <span>搜索框不透明度</span>
                </label>
                <input type="range" class="form-range" id="searchBoxOpacity" name="searchBoxOpacity" min="0" max="100" value="100" style="width: 80%">
                <span id="searchBoxOpacityValue" class="badge" style="font-size: 15px; font-weight: normal">100%</span>
            </div>
        </div>
    </div>
</div>
<!-- 搜索框 end -->
